<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件高级-5(鼠标事件补充)</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    你不能复制我了呢
    <script>
        // 1.禁止鼠标右键菜单
        // contextmenu 主要控制应该如何显示上下文菜单，主要用于程序员取消默认的上下文菜单
        document.addEventListener('contextmenu', function(e) {
            // 阻止默认行为(事件)
            // e.preventDefault();

        })

        // 2.禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })


        // 2.鼠标事件对象 mouseEvent
        document.addEventListener('click', function(e) {
            console.log(e);
            // (1)e.client  返回鼠标相对于浏览器窗口可视区的X坐标  左右-X 上下Y
            // 无论多高都始终以可视窗口为准的
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------------------------------------');

            // (2)e.page  鼠标在页面文档的x和y坐标
            // 坐标跟随页面滚动
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------------------------------------');

            // (3)e.screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>

</html>